<template>
	<view :style="[AppSkinVar]">
		<view class="search-input ">
			<u-search :show-action="false" :search-icon-color="AppSkin.primary" :placeholder="$t('layout.请输入关键词')" v-model="keyword" @search="search"></u-search>
		</view>
		<!-- <view class="keyword">
			<view class="title">
				{{ $t('classify.热门搜索') }}
			</view>
			<view class="u-flex u-flex-wrap ">
				<view class="keyword-text u-m-r-20 u-m-b-20" v-for="(item, index) in hotList" :key="index">
					{{ item }}
				</view>
			</view>
		</view> -->
		<view class="keyword">
			<view class="title u-flex u-flex-between">
				<text>{{ $t('classify.搜索历史') }}</text>
				<image :src="$staticPath('classify/delete.png')" class="img-32" @tap="deleteHistory" v-show="historyIconShow"></image>
			</view>
			<view class="u-flex u-flex-wrap ">
				<view class="keyword-text u-m-r-20 u-m-b-20" v-for="(item, index) in historyList" :key="index" @tap="search(item)">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import { getHotKeyword } from 'api/search'
export default {
	data() {
		return {
			type:'1',
			keyword: '',
			hotList: [],
			historyList: []
		}
	},
	computed:{
		historyIconShow () {
			return this.historyList.length
		}	
	},
	onLoad({type}) {
		this.type = type
		if(type === '1'){
			this.historyList = uni.getStorageSync('yuncangSeachHistory') || []
		}else{
			this.historyList = uni.getStorageSync('yuncangStockSeachHistory') || []
		}
		
	},
	methods: {
		deleteHistory() {
			this.$showModal({
				content: this.$t('classify.是否清空搜索记录'),
				success: res => {
					if (res.confirm) {
						if(this.type === '1'){
							uni.removeStorageSync('yuncangSeachHistory')
						}else{
							uni.removeStorageSync('yuncangStockSeachHistory')
						}
						this.historyList = []
					}
				}
			})
		},
		search(value) {
			if (value) {
				let type = this.type
				if (!this.historyList.find(item => item == value)) {
					this.historyList.push(value)
					if(type === '1'){
						uni.setStorageSync('yuncangSeachHistory',this.historyList)
					}else{
						uni.setStorageSync('yuncangStockSeachHistory',this.historyList)
					}
				}
				this.$goTo('/pages/yuncang/searchResult',{ keyword: value,type })
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.search-input {
	padding: 20rpx;
}
.keyword {
	padding: 0 30rpx;
	.title {
		padding: 24rpx 0;
	}
	.keyword-text {
		padding: 10rpx 20rpx;
		background: #f9f9fb;
		border-radius: 36rpx;
	}
}
</style>
